<template>
  <div class="login">
    <div class="login-form">
      <h4 class="login-title">登录</h4>
      <q-form @submit="onSubmit" class="q-gutter-md login-form-q">
        <q-input
          v-model="email"
          label="邮箱"
          hint="请输入您的邮箱"
          lazy-rules
          autocorrect="off"
          autocapitalize="off"
          autocomplete="off"
          spellcheck="false"
          :rules="[(val) => (val && val.length > 0) || '请输入您的邮箱地址']"
        />

        <q-input
          type="password"
          v-model="password"
          label="密码"
          lazy-rules
          autocorrect="off"
          autocapitalize="off"
          autocomplete="off"
          spellcheck="false"
          :rules="[
            (val) =>
              (val && val.length >= 6 && val.length <= 16) ||
              '请输入6-16位密码',
          ]"
        />

        <div>
          <q-btn
            :loading="loading"
            style="width: 100%"
            label="登录"
            type="submit"
            color="primary"
          />
        </div>
      </q-form>
    </div>
  </div>
</template>

<script>
import { login } from "@/api"

export default {
  data() {
    return {
      email: "",
      password: "",
      loading: false,
    }
  },

  methods: {
    // 登录
    onSubmit() {
      this.loading = true
      //  setTimeout(() => {
      //    this.loading = false
      //    this.$router.push('/')
      //    this.$q.notify({
      //      position: 'top',
      //      message: '登录成功'
      //    })
      //  }, 2000)
      const { email, password } = this
      login({ email, password })
        .then((res) => {
          this.loading = false
          if (res.code === 20000) {
            this.$storage.set("_i", res.data)
            this.$router.push("/")
            this.$q.notify("登录成功")
          } else {
            this.$q.notify(res.message)
          }
        })
        .catch((err) => {
          this.loading = false
          console.log(err)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~@/styles/quasar.variables.scss";

.login {
  min-height: calc(100vh - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 480px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid $border_color;
    .login-title {
      text-align: center;
      font-size: 16px;
    }
    .login-form-q {
      padding: 20px;
    }
  }
}
</style>
